<template>
  <view class="container">
    <!-- 切换登录/注册按钮 -->
    <view class="toggle-buttons">
      <button :class="{ active: isLogin }" @click="isLogin = true">登录</button>
      <button :class="{ active: !isLogin }" @click="isLogin = false">
        注册
      </button>
    </view>

    <!-- 登录/注册表单 -->
    <form>
      <view class="input-group" v-if="!isLogin">
        <label for="nickname">昵称</label>
        <input
          type="text"
          id="nickname"
          v-model="nickname"
          placeholder="请输入昵称"
          required
        />
      </view>
      <view class="input-group">
        <label for="phone">手机号</label>
        <input
          type="tel"
          id="phone"
          v-model="phone"
          placeholder="请输入手机号"
          required
        />
      </view>
      <view class="input-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model="password"
          placeholder="请输入密码"
          required
        />
      </view>
      <!-- 注册时显示重复密码输入框 -->
      <view class="input-group" v-if="!isLogin">
        <label for="confirmPassword">重复密码</label>
        <input
          type="password"
          id="confirmPassword"
          v-model="confirmPassword"
          placeholder="请再次输入密码"
          required
        />
      </view>
      <button v-if="isLogin" type="submit" @click="login">登录</button>
      <button v-if="!isLogin" type="submit" @click="register">注册</button>
    </form>
  </view>
</template>

<script>
import { login, register } from "@/api/login.js";

export default {
  name: "LoginRegisterPage",
  data() {
    return {
      isLogin: true, // 默认显示登录页面
      phone: "",
      password: "",
      confirmPassword: "",
      nickname: "",
    };
  },
  methods: {
    async login() {
      // 简单验证手机号和密码格式
      if (!this.validatePhone() || !this.validatePassword()) {
        return;
      }
      // 这里可以添加实际的登录请求代码，例如使用 uni.request 发送请求
      console.log("登录信息：", { phone: this.phone, password: this.password });
      try {
        const res = await login({ phone: this.phone, password: this.password });
        if (res.code === 1) {
          uni.setStorageSync("token", res.data.auth);
          uni.setStorageSync("userId", res.data.id);
          uni.setStorageSync("userInfo", res.data);
          console.log("登录成功", res.data);

          uni.switchTab({
            url: `/pages/home/index`, // 登录页面的路径，根据实际情况修改
          });

          return;
          // uni.showToast({
          //   title: "登录成功",
          //   icon: "success",
          // });
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      } catch (err) {
        console.log("submitForm", err);
        uni.showToast({
          title: "网络请求失败!!!",
          icon: "none",
        });
      }
    },
    async register() {
      // 简单验证手机号、密码和重复密码
      if (
        !this.validatePhone() ||
        !this.validatePassword() ||
        !this.validateConfirmPassword() ||
        !this.validateNickname()
      ) {
        return;
      }

      try {
        const res = await register({
          nickname: this.nickname,
          phone: this.phone,
          password: this.password,
          confirmPassword: this.confirmPassword,
        });
        if (res.code === 1) {
          uni.showToast({
            title: "注册成功",
            icon: "success",
          });

          // 注册成功后切换到登录页面
          this.isLogin = true;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      } catch (err) {
        console.log("submitForm", err);
        uni.showToast({
          title: "网络请求失败!!!",
          icon: "none",
        });
      }
    },
    validateNickname() {
      if (this.password.length > 10) {
        uni.showToast({
          title: "昵称长度不能超过 10 位",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    validatePhone() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.phone)) {
        uni.showToast({
          title: "请输入有效的手机号",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    validatePassword() {
      if (this.password.length < 6) {
        uni.showToast({
          title: "密码长度不能少于 6 位",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    validateConfirmPassword() {
      if (this.password !== this.confirmPassword) {
        uni.showToast({
          title: "两次输入的密码不一致",
          icon: "none",
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.toggle-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.toggle-buttons button {
  height: 40px;
  padding: 10px 20px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
  display: flex; /* 使用 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.toggle-buttons button.active {
  background-color: #007aff;
  color: white;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

form button {
  width: 100%;
  height: 40px;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex; /* 使用 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>
